<template>
	<view class="container">
		<view v-if="isFailed" class="community__failed">
			<view class="title">
				<image class="icon" src="@/static/image/community/community-failed.png"></image>
				<text class="containt">认证失败</text>
			</view>
			<text class="tips">{{failedMessage}}</text>
		</view>
		<image v-else class="banner__img" src="@/static/image/community/banner-bg01.png" lazy-load></image>
		<scroll-view scroll-y class="scroll__containt" >
			<view class="content__body">
				<text class="content__body--title">社区认证</text>
				<!-- 所属社区 -->
				<view class="list__item">
					<text class="title">所属社区</text>
					<picker mode="selector" @change="communityPickerChange" :value="communityIndex" range-key="name" :range="communityList">
						<form-list-item @click="communityHandle" placeholder="选择自己所在社区" :disabled="true" v-model="communityName"></form-list-item>
					</picker>
				</view>
				<!-- 所属小区 -->
				<view class="list__item">
					<text class="title">所属小区</text>
					<picker mode="selector" :disabled="!communityCode" @tap="residentialHandle" @change="residentialPickerChange" :value="residentialIndex" range-key="name" :range="residentialList">
						<form-list-item placeholder="选择自己所在社区" :disabled="true" v-model="residentialName"></form-list-item>
					</picker>
				</view>
				<!-- 门牌信息 -->
				<view class="list__item mb20">
					<text class="title">门牌信息</text>
					<picker mode="selector" :disabled="!residentialCode" @tap="floorHandle" @change="floorPickerChange" :value="floorIndex" range-key="title" :range="floorList">
						<form-list-item placeholder="选择楼幢号" :disabled="true" v-model="floorName"></form-list-item>
					</picker>
				</view>
				<view class="list__item mb20">
					<picker mode="selector" :disabled="!floorId" @tap="unitHandle" @change="unitPickerChange" :value="unitIndex" range-key="title" :range="unitList">
						<form-list-item placeholder="选择单元号" :disabled="true" v-model="unitName"></form-list-item>
					</picker>
				</view>
				<view class="list__item mb20">
					<picker mode="selector" :disabled="!unitId" @tap="groundHandle" @change="groundPickerChange" :value="groundIndex" range-key="title" :range="groundList">
						<form-list-item placeholder="选择楼层号" :disabled="true" v-model="groundName"></form-list-item>
					</picker>
				</view>
				<view class="list__item">
					<picker mode="selector" :disabled="!groundId" @tap="houseHandle" @change="housePickerChange" :value="houseIndex" range-key="title" :range="houseList">
						<form-list-item placeholder="选择房号" :disabled="true" v-model="houseName"></form-list-item>
					</picker>
				</view>
				<view class="bottom__btn">
					<button @tap="nextHandle" class="bottom__btn--submit" type="primary" :disabled="disabled">下一步</button>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import formListItem from '../components/form-list-item.vue';
	import * as api from "@/http/api";
	import { mapState } from 'vuex';
	export default {
		components: {
			formListItem
		},
		data() {
			return {
				canClick: true,
				communityList: [{
					code: 1,
					name: '东信社区'
				},{
					code: 2,
					name: '上保社区'
				}],//社区列表
				residentialList: [{
					code: 1,
					name: '东信小区'
				},{
					code: 2,
					name: '上保小区'
				}],//小区列表
				isShowCommunity: false,
				communityIndex: 0,
				communityName: '',
				communityCode: '',
				residentialIndex: 0,
				residentialName: '',
				residentialCode: '',
				residentialSystemId: '',
				HouseId: '',
				isFailed: false,//是否认证失败
				floorList: [],
				floorIndex: '',
				floorName: '',
				floorId: '',
				unitList: [],
				unitIndex: '',
				unitName: '',
				unitId: '',
				groundList: [],
				groundIndex: '',
				groundName: '',
				groundId: '',
				houseList: [],
				houseIndex: '',
				houseName: '',
				houseId: '',
				houseInfo: '',//房屋信息,从幢开始拼接名字到室
			}
		},
		computed: {
			...mapState(['failedMessage']),
			disabled(){
				return !(this.communityCode && this.residentialCode && this.houseId)
			}
		},
		methods: {
			// 获取社区列表
			getCommunityList(){
				this.$request({
					url: api.communityList,
				}).then(res=>{
					this.communityList = res
				})
			},
			// 获取小区列表
			getResidentialList(){
				this.$request({
					url: api.listResidential,
					data: {
						communityCode: this.communityCode
					}
				}).then(res=>{
					this.residentialList = res
				})
			},
			// 获取房屋列表
			getHouseList(){
				this.$request({
					url: api.listHouse,
					data: {
						projectUnionId: this.residentialCode,
						systemId: this.residentialSystemId
					}
				}).then( res => {
					this.floorList = res;
					console.log(2,res)
				})
			},
			// 选择社区
			communityPickerChange(e){
				const index = e.detail.value
				if(this.communityCode === this.communityList[index].code) return
				this.communityIndex = index
				this.communityName = this.communityList[index].name
				this.communityCode = this.communityList[index].code
				this.residentialName = ''
				this.residentialCode = ''
				this.residentialSystemId = ''
				this.floorName = ''
				this.floorId = ''
				this.unitName = ''
				this.unitId = ''
				this.groundName = ''
				this.groundId = ''
				this.houseName = ''
				this.houseId = ''
				this.getResidentialList()
			},
			// 选择小区
			residentialHandle(){
				if(this.communityCode) return
				uni.showToast({
					title: '请先选择所属社区~',
					icon: 'none'
				})
			},
			residentialPickerChange(e){
				console.log(this.communityCode)
				const index = e.detail.value
				if(this.residentialCode === this.residentialList[index].code) return
				this.residentialIndex = index
				this.residentialName = this.residentialList[index].name
				this.residentialCode = this.residentialList[index].code
				this.residentialSystemId = this.residentialList[index].systemId
				this.floorName = ''
				this.floorId = ''
				this.unitName = ''
				this.unitId = ''
				this.groundName = ''
				this.groundId = ''
				this.houseName = ''
				this.houseId = ''
				this.getHouseList()
			},
			// 选择楼幢号
			floorHandle(){
				if(this.residentialCode) return
				uni.showToast({
					title: '请先选择所属小区~',
					icon: 'none'
				})
			},
			floorPickerChange(e){
				const index = e.detail.value
				if(this.floorId === this.floorList[index].id) return
				this.floorIndex = index
				this.floorName = this.floorList[index].title
				this.floorId = this.floorList[index].id
				this.unitList = this.floorList[index].children
				this.unitName = ''
				this.unitId = ''
				this.groundName = ''
				this.groundId = ''
				this.houseName = ''
				this.houseId = ''
			},
			// 选择单元号
			unitHandle(){
				if(this.floorId) return
				uni.showToast({
					title: '请先选择楼幢号~',
					icon: 'none'
				})
			},
			unitPickerChange(e){
				const index = e.detail.value
				if(this.unitId === this.unitList[index].id) return
				this.unitIndex = index
				this.unitName = this.unitList[index].title
				this.unitId = this.unitList[index].id
				this.groundList = this.unitList[index].children
				this.groundName = ''
				this.groundId = ''
				this.houseName = ''
				this.houseId = ''
			},
			// 选择楼层号
			groundHandle(){
				if(this.unitId) return
				uni.showToast({
					title: '请先选择单元号~',
					icon: 'none'
				})
			},
			groundPickerChange(e){
				const index = e.detail.value
				if(this.groundId === this.groundList[index].id) return
				this.groundIndex = index
				this.groundName = this.groundList[index].title
				this.groundId = this.groundList[index].id
				this.houseList = this.groundList[index].children
				this.houseName = ''
				this.houseId = ''
			},
			// 选择房号
			houseHandle(){
				if(this.groundId) return
				uni.showToast({
					title: '请先选择楼层号~',
					icon: 'none'
				})
			},
			housePickerChange(e){
				const index = e.detail.value
				this.houseIndex = index
				this.houseName = this.houseList[index].title
				this.houseId = this.houseList[index].id
			},
			// 下一步
			nextHandle(){ 
				if (!this.canClick) return
				this.canClick = false
				this.houseInfo = `${this.floorName}${this.unitName}${this.groundName}${this.houseName}`
				this.$cache.set("communityObj", {name: this.communityName,id: this.communityCode})
				this.$cache.set("residentialObj", {name: this.residentialName,id: this.residentialCode})
				this.$cache.set("houseInfoObj", {
					floorName: this.floorName,
					floorId: this.floorId,
					unitName: this.unitName,
					uniId: this.unitId,
					groundName: this.groundName,
					groundId: this.groundId,
					houseName: this.houseName,
					houseId: this.houseId,
					houseInfo: this.houseInfo
				})
				uni.navigateTo({
					url: '/pages/community/personal/personal'
				})
			}
		},
		onLoad(option) {
			this.isFailed = option.isFailed ? JSON.parse(option.isFailed) : false
			
			const communityObj = this.$cache.get("communityObj")
			const residentialObj = this.$cache.get("residentialObj")
			const houseInfoObj = this.$cache.get("houseInfoObj") 
			this.communityName = communityObj?.name || ''
			this.communityCode = communityObj?.id || ''
			this.residentialName = residentialObj?.name || ''
			this.residentialCode = residentialObj?.id || ''
			this.floorName = houseInfoObj?.floorName || ''
			this.floorId = houseInfoObj?.floorId || ''
			this.unitName = houseInfoObj?.unitName || ''
			this.unitId = houseInfoObj?.unitId || ''
			this.groundName = houseInfoObj?.groundName || ''
			this.groundId = houseInfoObj?.groundId || ''
			this.houseName = houseInfoObj?.houseName || ''
			this.houseId = houseInfoObj?.houseId || ''
			this.houseInfo = houseInfoObj?.houseInfo || ''
			this.getCommunityList()
		},
		onShow(){
			this.canClick = true
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
	.container{
		height: 100vh;
		background-color: $uni-bg-color;
		overflow: hidden;
	}
	.scroll__containt {
		position: relative;
		top: 264rpx;
		width: 100%;
		padding: 50rpx 32rpx;
		height: calc(100vh - 264rpx);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		z-index: 999;
		box-sizing: border-box;
		background-color: $uni-bg-color;
	}
	
	.community__failed {
		position: fixed;
		padding: 40rpx 32rpx 0 32rpx;
		width: 100%;
		height: 340rpx;
		background-color: #FFE3E3;
		box-sizing: border-box;
		
		.title {
			display: flex;
			margin-bottom: 18rpx;
			align-items: center;
			
			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
			}
			
			.containt {
				font-size: 36rpx;
				color: #E84335;	
			}
			
		}
		
		.tips {
			display: -webkit-box;
			font-size: $uni-font-size-base;
			color: #E84335;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //需要控制的文本行数
			overflow: hidden;
		}
	}
	
	.banner__img {
		position: fixed;
		width: 100%;
		height: 340rpx;
	}
	.content__body {
		
		&--title {
			display: flex;
			margin-bottom: 80rpx;
			font-size: 48rpx;
		}
	}
	
	.list__item {
		margin-bottom: 58rpx;
		border-bottom: 1rpx solid $uni-border-color;
		
		&.mb20 {
			margin-bottom: 20rpx;
		}
		
		.title {
			font-size: $uni-font-size-lg;
		}
	}
	
	.bottom__btn--submit {
		width: 480rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
	}
	
	uni-button[disabled][type=primary] {
		background-color: #f99464;
	}
	
	uni-button {
		background-color: #FF6C25;
	}
	
	.button-hover[type=primary]{
		background-color: #f78d5a;
	}
	
	button[type=primary] {
		background-color: #FF6C25;
	}
	
	button[disabled][type=primary] {
		background-color: #f99464;
	}
	
</style>
